<template>
    <!-- 0 发起人 1审批 2抄送 3条件 4路由 -->
    <div class="node-wrap" v-if="nodeConfig.type < 3">
        <div v-if="nodeConfig.type == 0">
            <div class="zero-node" :style="`background: rgb(${bgColors[nodeConfig.type]});`">
                <span class="title-span"
                    ><el-icon><Flag /></el-icon>{{ nodeConfig.nodeName }}</span
                >
            </div>
        </div>
        <div
            v-if="nodeConfig.type !== 0"
            class="node-wrap-box"
            :class="isTried && nodeConfig.error ? 'active error' : ''"
        >
            <div class="title" :style="`background: rgb(${bgColors[nodeConfig.type]});`">
                <el-icon size="15px" v-show="nodeConfig.type == 1" style="margin-right: 5px"
                    ><Stamp
                /></el-icon>
                <span class="editable-title">{{ nodeConfig.nodeName }}</span>
                <el-icon @click="delNode" :size="18" class="close">
                    <Close />
                </el-icon>
            </div>
            <div class="content" @click="setPerson">
                <div class="text">
                    <span class="placeholder" v-if="!showText">请选择{{ defaultText }}</span>
                    {{ showText }}
                </div>
                <el-icon :size="20" class="arrow" v-if="nodeConfig.type !== 0">
                    <ArrowRight />
                </el-icon>
            </div>
            <div class="error_tip" v-if="isTried && nodeConfig.error">
                <el-icon color="red" :size="26">
                    <WarningFilled />
                </el-icon>
            </div>
        </div>
        <addNode v-model:childNodeP="nodeConfig.childNode" />
    </div>
    <div class="branch-wrap" v-if="nodeConfig.type == 4">
        <div class="branch-box-wrap">
            <div class="branch-box">
                <button class="add-branch" @click="addTerm">添加条件</button>
                <div
                    class="col-box"
                    v-for="(item, index) in nodeConfig.conditionNodes"
                    :key="index"
                >
                    <div class="condition-node">
                        <div class="condition-node-box">
                            <div
                                class="auto-judge"
                                :class="isTried && item.error ? 'error active' : ''"
                            >
                                <div
                                    class="sort-left"
                                    v-if="index != 0"
                                    @click="arrTransfer(index, -1)"
                                >
                                    <el-icon color="#000" size="16px"><ArrowLeft /></el-icon>
                                </div>
                                <div class="title-wrapper">
                                    <div>
                                        <el-icon style="margin-right: 5px"><Share /></el-icon>
                                        <span class="editable-title">{{ item.nodeName }}</span>
                                    </div>

                                    <span
                                        class="priority-title"
                                        @click="setPerson(item.priorityLevel)"
                                        >优先级{{ item.priorityLevel }}</span
                                    >
                                    <el-icon @click="delTerm(index)" :size="18" class="close">
                                        <Close />
                                    </el-icon>
                                </div>
                                <div
                                    class="sort-right"
                                    v-if="index != nodeConfig.conditionNodes.length - 1"
                                    @click="arrTransfer(index)"
                                >
                                    <el-icon color="#000" size="16px"><ArrowRight /></el-icon>
                                </div>
                                <div class="content" @click="setPerson(item.priorityLevel)">
                                    {{ conditionStr(nodeConfig.conditionNodes[index].arrList) }}
                                </div>
                                <div class="error_tip" v-if="isTried && item.error">
                                    <el-icon color="red" :size="26">
                                        <WarningFilled />
                                    </el-icon>
                                </div>
                            </div>
                            <addNode v-model:childNodeP="item.childNode" />
                        </div>
                    </div>
                    <nodeWrap v-if="item.childNode" v-model:nodeConfig="item.childNode" />
                    <template v-if="index == 0">
                        <div class="top-left-cover-line"></div>
                        <div class="bottom-left-cover-line"></div>
                    </template>
                    <template v-if="index == nodeConfig.conditionNodes.length - 1">
                        <div class="top-right-cover-line"></div>
                        <div class="bottom-right-cover-line"></div>
                    </template>
                </div>
            </div>
            <addNode v-model:childNodeP="nodeConfig.childNode" />
        </div>
    </div>
    <nodeWrap v-if="nodeConfig.childNode" v-model:nodeConfig="nodeConfig.childNode" />
</template>
<script setup>
import { onMounted, ref, watch, getCurrentInstance, computed } from 'vue'
import { useFlow } from '@/stores/modules/flow'

const bgColors = ['87, 106, 149', '255, 148, 62', '50, 150, 250']
const placeholderList = ['发起人', '审批人', '抄送人']

const _uid = getCurrentInstance().uid

const props = defineProps({
    nodeConfig: {
        type: Object,
        default: () => ({})
    }
})

const defaultText = computed(() => {
    return placeholderList[props.nodeConfig.type]
})
const showText = computed(() => {
    if (props.nodeConfig.type == 1) {
        if (props.nodeConfig.people.length > 0) {
            return props.nodeConfig.people.map((x) => x.name).join(',')
        }
    }
    return ''
})

const emits = defineEmits(['update:nodeConfig'])
const store = useFlow()
const {
    setApprover,
    setCopyer,
    setCondition,
    setApproverConfig,
    setCopyerConfig,
    setConditionsConfig,
    nodeConfig1,
    addNodeIdAndFatherId
} = store
const isTried = computed(() => store.isTried)
const approverConfig1 = computed(() => store.approverConfig1)
const copyerConfig1 = computed(() => store.copyerConfig1)
const conditionsConfig1 = computed(() => store.conditionsConfig1)
watch(approverConfig1, (approver) => {
    if (approver.flag && approver.id === _uid) {
        emits('update:nodeConfig', approver.value)
    }
})
watch(copyerConfig1, (copyer) => {
    if (copyer.flag && copyer.id === _uid) {
        emits('update:nodeConfig', copyer.value)
    }
})
watch(conditionsConfig1, (condition) => {
    if (condition.flag && condition.id === _uid) {
        emits('update:nodeConfig', condition.value)
    }
})
const conditionStr = (arr) => {
    if (arr.length === 0) {
        return '其它条件进入此流程'
    }
    let str = '条件符合 '
    arr.forEach((element) => {
        str += element.name
        if (arr.length > 1) {
            str += ' 或 '
        }
    })
    if (arr.length > 1) {
        str = str.substr(0, str.length - 3)
    }

    return str
}

const delNode = () => {
    emits('update:nodeConfig', props.nodeConfig.childNode)
    addNodeIdAndFatherId(nodeConfig1)
}
const addTerm = () => {
    const len = props.nodeConfig.conditionNodes.length + 1
    props.nodeConfig.conditionNodes.push({
        nodeName: '条件' + len,
        type: 3,
        priorityLevel: len,
        error: true,
        arrList: [],
        childNode: null
    })
    emits('update:nodeConfig', props.nodeConfig)
    addNodeIdAndFatherId(nodeConfig1)
}
const delTerm = (index) => {
    props.nodeConfig.conditionNodes.splice(index, 1)
    props.nodeConfig.conditionNodes.map((item, index) => {
        item.priorityLevel = index + 1
        item.nodeName = `条件${index + 1}`
    })
    emits('update:nodeConfig', props.nodeConfig)
    if (props.nodeConfig.conditionNodes.length == 1) {
        if (props.nodeConfig.childNode) {
            if (props.nodeConfig.conditionNodes[0].childNode) {
                reData(props.nodeConfig.conditionNodes[0].childNode, props.nodeConfig.childNode)
            } else {
                props.nodeConfig.conditionNodes[0].childNode = props.nodeConfig.childNode
            }
        }
        emits('update:nodeConfig', props.nodeConfig.conditionNodes[0].childNode)
    }
    addNodeIdAndFatherId(nodeConfig1)
}
const reData = (data, addData) => {
    if (!data.childNode) {
        data.childNode = addData
    } else {
        reData(data.childNode, addData)
    }
}
const setPerson = (priorityLevel) => {
    const { type } = props.nodeConfig
    if (type == 0) {
        return
    } else if (type == 1) {
        setApprover(true)
        setApproverConfig({
            value: JSON.parse(JSON.stringify(props.nodeConfig)),
            flag: false,
            id: _uid
        })
    } else if (type == 2) {
        setCopyer(true)
        setCopyerConfig({
            value: JSON.parse(JSON.stringify(props.nodeConfig)),
            flag: false,
            id: _uid
        })
    } else {
        setCondition(true)
        setConditionsConfig({
            value: JSON.parse(JSON.stringify(props.nodeConfig)),
            priorityLevel,
            flag: false,
            id: _uid
        })
    }
}
const arrTransfer = (index, type = 1) => {
    //向左-1,向右1
    props.nodeConfig.conditionNodes[index] = props.nodeConfig.conditionNodes.splice(
        index + type,
        1,
        props.nodeConfig.conditionNodes[index]
    )[0]
    props.nodeConfig.conditionNodes.map((item, index) => {
        item.priorityLevel = index + 1
    })
    emits('update:nodeConfig', props.nodeConfig)
}
</script>
<style lang="scss" scope>
.error_tip {
    position: absolute;
    top: 0px;
    right: 0px;
    transform: translate(150%, 0px);
    font-size: 24px;
}

.promoter_person .el-dialog__body {
    padding: 10px 20px 14px 20px;
}

.selected_list {
    margin-bottom: 20px;
    line-height: 30px;
}

.selected_list span {
    margin-right: 10px;
    padding: 3px 6px 3px 9px;
    line-height: 12px;
    white-space: nowrap;
    border-radius: 2px;
    border: 1px solid rgba(220, 220, 220, 1);
}

.selected_list img {
    margin-left: 5px;
    width: 7px;
    height: 7px;
    cursor: pointer;
}

.title-span {
    display: flex;
    align-items: center;
    .el-icon {
        margin-right: 5px;
    }
}
.zero-node {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 220px;
    border-radius: 4px;
    height: 40px;
    color: #fff;
    font-size: 14px;
    .title-span {
        display: flex;
        align-items: center;
        justify-content: center;
        .el-icon {
            margin-right: 5px;
            margin-bottom: 2px;
        }
    }
}
</style>
